<template>
    <van-card
        class="goods-card-container"
        :price="goods.price"
        :desc="goods.desc"
        :title="goods.title"
        :thumb="goods.images[0]"
        @click-thumb="handle_preview(goods.images)"
    >
        <template #tags>
            <van-tag plain type="primary" v-for="tag in goods.tags">
                {{ tag }}
            </van-tag>
        </template>
        <template #num>
            <img
                v-show="goods.count > 0"
                src="https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/rec.png"
                class="decrease"
                @click="handle_count(goods.count - 1)"
            />
            <span class="count" v-show="goods.count > 0">
                {{ goods.count }}
            </span>
            <img
                src="https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/add.png"
                class="increase"
                @click="handle_count(goods.count + 1)"
            />
        </template>
    </van-card>
</template>

<script>
import { ImagePreview } from "vant"

export default {
    props: {
        goods: {
            type: Object,
            default: () => ({})
        }
    },
    methods: {
        handle_count(count) {
            this.$emit("change_count", count)
        },
        handle_preview(img_url) {
            ImagePreview(img_url)
        }
    }
}
</script>

<style lang="less">
.van-card {
    padding: 7px 0;
    margin: 0;
    .decrease,
    .increase {
        width: 17px;
        height: 17px;
        vertical-align: text-bottom;
    }
    .increase {
        margin-right: 10px;
    }
    .count {
        margin: 0 5px;
        font-size: 15px;
    }
}
</style>
